<template>
  <el-container>
    <el-aside width="200px" class="leftTab">
      <p class="group">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      </p>
      <p v-for="(item,index) in leftAside" :key="index" class="subGroup">
        <el-checkbox-group v-model="checkedDevice" @change="handleCheckedCitiesChange">
          <el-checkbox :label="item" >{{ item.name }} ({{ item.deviceCounts }})</el-checkbox>
          <!-- 删除设备分组 -->
          <el-button v-if="item.id != 0 ? true : false " type="danger" class="deleteButton" icon="el-icon-delete" circle @click="deleteId(item.id)"/>
          <el-dialog :visible.sync="deleteGroupFlag" title="删除分组" width="30%" center>
            <p class="el-cont">确定要删除该分组吗？</p>
            <p class="el-cont">分组内的{{ item.deviceCounts }}台设备将归为未分组</p>
            <span slot="footer" class="dialog-footer">
              <el-button @click="deleteGroupFlag = false">取 消</el-button>
              <el-button type="primary" @click="deleteGroup">确 定</el-button>
            </span>
          </el-dialog>
        </el-checkbox-group>
      </p>
      <el-button class="groupButton" type="button" @click="addGroupFlag = true">添加分组</el-button>
      <!-- 添加分组弹出框 -->
      <el-dialog :visible.sync="addGroupFlag" title="添加分组" width="30%" center>
        <el-input v-model="deviceName" placeholder="请输入分组名称" clearable/>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addGroupFlag = false">取 消</el-button>
          <el-button type="primary" @click="addGroupInfo">确 定</el-button>
        </span>
      </el-dialog>
    </el-aside>
    <el-main>
      <el-table ref="multipleTable" :data="tableData" stripe style="width: 100%" @selection-change="tabSelect">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="设备别名" width="180"/>
        <el-table-column prop="type" label="设备型号" width="180"/>
        <el-table-column prop="groupName" label="所属分组"/>
        <el-table-column prop="tel" label="手机号"/>
        <el-table-column prop="tiktok.tiktokId" label="抖音号"/>
        <el-table-column prop="tiktok.nickname" label="抖音昵称"/>
        <el-table-column prop="tiktok.fans" label="粉丝数量"/>
        <el-table-column prop="tiktok.createTime" label="接入时间 "/>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :total="totalcount" />
      </div>
    </el-main>
    <el-aside width="400px" v-show="rightFalg" class="rightTab">
      <template>
        <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
          <el-tab-pane label="详情" name="deteil">
            <div class="groupdetail" v-if="groupDetailFlag">
              <strong>已选择{{groupCont}}台设备</strong>
              <p>设备别名:</p>
              <p class="groupNickname" v-for="(item , index) in tableData" :key="index">{{item.name}}</p>
            </div>
            <div class="groupdetail" v-if="groupInfoFlag">
              <strong>{{deviceInfo.name}}</strong>
              <p>设备型号：{{deviceInfo.type}}</p>
              <p>设备IMEI：{{deviceInfo.imei}}</p>
              <p>所属分组：{{deviceInfo.groupName}}</p>
              <p>手机号：{{deviceInfo.tel}}</p>
              <p>归属地: {{deviceInfo.location}}</p>
              <p>抖音号：{{tiktok.tiktokId}}</p>
              <p>抖音昵称：{{tiktok.nickname}}</p>
              <p>
                <span><strong>{{tiktok.likes}}</strong> 获赞</span>
                <span><strong>{{tiktok.follows}}</strong> 关注</span>
                <span><strong>{{tiktok.fans}}</strong> 粉丝</span>
              </p>
              <p>
                <span><strong>{{tiktok.products}}</strong> 作品</span>
                <span><strong>{{tiktok.comments}}</strong> 评论</span>
                <span><strong>{{tiktok.forward}}</strong> 转发</span>
              </p>
              <p>个性签名：{{tiktok.signature}}</p>
              <p>学校：{{tiktok.school}}</p>
              <p>性别：{{tiktok.sex}}</p>
              <p>生日：{{tiktok.birthday}}</p>
              <p>地区：{{tiktok.region}}</p>
              <p>虚拟位置：{{tiktok.virtualLoaction}}</p>
              <p>APP版本：{{tiktok.appVersion}}</p>
              <p>接入时间：{{tiktok.createTime}}</p>
              <p>客服：{{tiktok.userName}}</p>
              <strong>同一客服的其他设备：</strong>
              <p v-for="(item , index) in otherDeviceNames" :key="index">{{item}}</p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="操作" name="operate">
            <p class="title">手机</p>
            <div class="option">
                <el-button round @click="addTaskCommand('一键锁屏')">一键锁屏</el-button>
                <el-button round @click="addTaskCommand('一键解锁')">一键解锁</el-button>
                <el-button round @click="addTaskCommand('重启手机')">重启手机</el-button>
                <el-button round @click="addTaskCommand('返回HOME')">返回HOME</el-button>
                <el-button round @click="addTaskCommand('一键静音')">一键静音</el-button>
                <el-button round @click="addTaskCommand('取消静音')">取消静音</el-button>
                <el-button round @click="addTaskCommand('打开抖音')">打开抖音</el-button>
                <el-button round @click="addTaskCommand('关闭抖音')">关闭抖音</el-button>
            </div>
            <p class="title">抖音</p>
            <div class="option">
                <el-button round @click="addTaskInteraction('发布作品','发布数量','发布',1)">发布作品</el-button>

            </div>
            <p class="title">互动</p>
            <div class="option">
                <el-button round @click="addTaskInteraction('一键关注','关注数量','关注')">一键关注</el-button>
                <el-button round @click="addTaskInteraction('一键点赞','点赞数量','点赞')">一键点赞</el-button>
                <el-button round @click="addTaskInteraction('一键评论','评论数量','评论',0)">一键评论</el-button>
                <el-button round @click="addTaskInteraction('一键转发','转发数量','转发')">一键转发</el-button>
                <!-- 互动弹出层 -->
                <el-dialog :title="interaction" :visible.sync="interactionFlag" center>
                  <el-form ref="form" :model="form">
                  <el-form-item :label="form.labName + ' :'">
                    <el-input v-model="form.number"></el-input>
                    <span>{{form.labName}}上限，0表示不限制。已选设备：{{groupCont}}</span>
                  </el-form-item>
                  <el-form-item :label="'需要' + form.intname + '的作品链接地址：'" v-if="form.libraryId == 1 ? false : true">
                    <el-input v-model="form.url"></el-input>
                  </el-form-item>
                  <el-form-item v-if="form.libraryId == 1 ? true : false">
                  <span>请选择要发布的作品。若选中多条，每台设备将随机选择一条或多条发送。已选作品：{{libraryCont}}</span>
                  <el-table :data="libraryList" @selection-change="tabLibrary">
                    <el-table-column type="selection" />
                    <el-table-column prop="groupName" label="分组" />
                    <el-table-column prop="text" label="内容"/>
                    <el-table-column prop="times" label="长度"/>
                  </el-table>
                  </el-form-item>
                  <el-form-item label="评论内容：一行一条，随机发送。" v-if="form.forwardId == 0 ? true : false">
                    <el-input type="textarea" v-model="form.forward" id="textheight"></el-input>
                  </el-form-item>
                  <el-button type="primary" style="position:relative" v-if="form.forwardId == 0 ? true : false">选择本地txt文件
                    <input ref="upload" id="uploadfile" type="file" @change="uploadfile"  />
                  </el-button>
                </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="interactionFlag = false">取 消</el-button>
                    <el-button type="primary" @click="interactionTask">确 定</el-button>
                  </span>
                </el-dialog>
            </div>
            <p class="title">辅助</p>
            <div class="option">
                <el-button round @click="addTaskCommand('清理照片')">清理照片</el-button>
                <el-button round @click="setNameFlag = true" style="margin-left:0;">设备命名</el-button>
                <!-- 设备命名弹出层 -->
                <el-dialog title="设备命名" :visible.sync="setNameFlag" center>
                  <p>给每台设备起一个好记的别名，已选设备：{{groupCont}}</p>
                  <el-table :data="setNameList">
                    <el-table-column prop="type" label="设备型号" />
                    <el-table-column prop="groupName" label="所属分组"/>
                    <el-table-column prop="tel" label="手机号"/>
                    <el-table-column prop="tiktok.tiktokId" label="抖音号"/>
                    <el-table-column prop="tiktok.nickname" label="抖音昵称"/>
                    <el-table-column label="设备重命名">
                      <template slot-scope="scope">
                        <div>
                            <el-input size="small" v-model="scope.row.name" placeholder="重命名"></el-input>
                        </div>
                      </template> 
                    </el-table-column>
                  </el-table>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="setNameFlag = false">取 消</el-button>
                    <el-button type="primary" @click="setName">确 定</el-button>
                  </span>
                </el-dialog>
                <el-button round @click="setGroupFlag = true">设备分组</el-button>
                <!-- 设备分组弹出层 -->
                <el-dialog title="设备命名" :visible.sync="setGroupFlag" center>
                  <p>一台设备只能有一个分组，再次分组会直接覆盖原有的分组信息。已选设备：{{groupCont}}</p>
                    <el-radio-group v-model="reGroupId" class="reGroupList">
                      <el-radio v-for="(item,index) in setGroupList" :key="index" :label="item.id" v-if="item.id != 0?true:false">{{item.name}} --- 已有设备 {{item.deviceCounts}}</el-radio>
                    </el-radio-group>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="setGroupFlag = false">取 消</el-button>
                    <el-button type="primary" @click="setGroup">确 定</el-button>
                  </span>
                </el-dialog>
                <el-button round @click="addTaskUserFlag = true">指定客服</el-button>
                <!-- 指定客服弹出层 -->
                <el-dialog title="指定客服" :visible.sync="addTaskUserFlag" center>
                  <p>为已选的设备分配专属客服，只能选择一个人。已选设备：{{groupCont}}</p>
                  <el-table :data="userList" @selection-change="tabUser">
                    <el-table-column type="selection" />
                    <el-table-column prop="name" label="姓名" />
                    <el-table-column prop="id" label="工号"/>
                    <el-table-column prop="account" label="登录账号"/>
                    <el-table-column prop="roleName" label="角色"/>
                  </el-table>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="addTaskUserFlag = false">取 消</el-button>
                    <el-button type="primary" @click="setUser">确 定</el-button>
                  </span>
                </el-dialog>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-aside>
  </el-container>
</template>

<script>
import { searchDevice, groupDevice, addGroup, deleteGroup , deviceInfo ,setGroup ,setName ,interaction , command , uploadComment ,userList , setUser ,publishVideo} from '@/api/device'
import {searchLibrart} from '@/api/library'
export default {
  inject: ['reload'],//引用刷新页面方法
  data() {
    return {
      dataObj: { // 查询设备默认参数,默认查询未分组的
        groupId: '',
        limit: 10,
        offset: 0
      },
      checkAll: false,
      checkedDevice: [],
      isIndeterminate: true,
      tableData: [],
      leftAside: [],//左边集合
      deleGroupId:'',//左边集合删除分组id
      addGroupFlag: false, // 添加分组显示隐藏的弹框
      deviceName: '', // 设备分组名称
      deleteGroupFlag: false,// 删除分组显示隐藏的弹框
      totalcount:0,//分页默认数量
      rightFalg: false,//右侧栏目显示隐藏
      activeName2:'deteil',//tabs默认显示详情
      groupCont:0,//已选择设备台数
      groupDetailFlag:false,//点击分组查看详情
      groupInfoFlag:false,//点击设备查看详情
      deviceInfo:'', //设备详情信息
      tiktok:'',//抖音信息
      otherDeviceNames:[],//其他设备列表
      setNameList:[],//重命名集合
      setNameFlag:false,//重命名弹框
      setGroupFlag:false,//设置分组弹框
      setGroupList:[],//设置分组集合
      reGroupId: 0,//默认未分组id是0
      deviceId:'',//接受已勾选设备的id
      interaction:'',//设备互动标题
      interactionFlag:false,//设备互动默认隐藏
      form:{ //互动的表单数据
        labName:'',
        intname:'',
        number:'',
        url:'',
        forward:'',
        forwardId:'',
        libraryId:''
      },
      interactionList:{
        'devices':[],
        "extraMessage": "",
        "groupId": null,
        "groupName": "",
        "maxCounts":null ,
        "name": "",
        "url": ""
      },//互动的数据集合
      commandList:{
        'devices':[],
        'groupId':null,
        'groupName':'',
        'maxCounts':0,
        'name':''
      },//简单指令数据集合
      addTaskUserFlag:false,//用户列表显示隐藏
      userList:[],//用户列表数组数据
      deviceImei:[],//设备IMEI号
      userId:'',//用户id
      libraryCont:0,//作品数量
      libraryLimit:10,//作品查询参数
      libraryOffset:0,//作品查询参数
      libraryList:[],//作品库数据集合
      videoId:'',//作品id
    }
  },
  created() {

  },
  mounted() {
    this.initTable()
    this.initGroup()
    this.initUser()
    this.initLibrary()
  },
  methods: {
    handleClick(tab, event) {

    },
    // 获取作品库作品
    initLibrary(){
      searchLibrart('',this.libraryLimit,this.libraryOffset).then(Response =>{
        this.libraryList = Response.data.records;
      })
    },
    //获取客服列表
    initUser () {
      userList().then(Response =>{
        this.userList = Response.data;
      })
    },
    // 获取设备列表信息
    initTable() {
      searchDevice(this.dataObj.groupId, this.dataObj.limit, this.dataObj.offset).then(Response => {
        this.tableData = Response.data.records;
        this.totalcount = parseInt(Response.data.total);
      })
    },
    // 获取设备分组信息
    initGroup() {
      groupDevice().then(Response => {
        this.leftAside = Response.data;
        this.setGroupList = Response.data;
      })
    },
    // 复选框全选事件
    handleCheckAllChange(val) {
      this.checkedDevice = val ? this.leftAside : [];
      this.isIndeterminate = false;
      searchDevice('', this.dataObj.limit, this.dataObj.offset).then(Response => {
        this.tableData = Response.data.records;
        this.groupCont = this.tableData.length;
        if(this.checkedDevice.length > 0){
          this.$refs.multipleTable.toggleAllSelection(this.tableData);
        }else{
          this.$refs.multipleTable.clearSelection();
        }
      })
      this.interactionList.groupId = '';
      if(val){
        this.rightFalg = true;
        this.groupDetailFlag = true;
        this.groupInfoFlag = false;
      }else{
        this.rightFalg = false;
      }
    },
    // 复选框单选事件处理
    handleCheckedCitiesChange(value) {
      if (value.length == 1) {
        this.rightFalg = true;
        this.groupDetailFlag = true;
        this.groupInfoFlag = false;
        this.dataObj.groupId = value[0].id;
        this.interactionList.groupId = value[0].id;//互动操作组ID赋值
        this.interactionList.groupName = value[0].name;//互动操作name赋值
        this.commandList.groupId = value[0].id;//简单指令操作组ID赋值
        this.commandList.groupName = value[0].name;//简单指令操作name赋值
        searchDevice(this.dataObj.groupId, this.dataObj.limit, this.dataObj.offset).then(Response => {
          this.tableData = Response.data.records;
          this.$refs.multipleTable.toggleAllSelection(this.tableData);
        })
      }else{
        this.rightFalg = false;
        this.groupDetailFlag = false;
        this.$refs.multipleTable.clearSelection();
      }
    },
    //表格事件处理
    tabSelect(value) {
      this.setNameList = value;//赋值重命名数组集合
      this.groupCont = this.setNameList.length;
      this.deviceId = '';
      this.interactionList.devices = [];
      this.commandList.devices = [];
      this.deviceImei = [];
      for(var i= 0; i< value.length; i++){
        this.deviceId += value[i].id + ',';
        this.interactionList.devices.push(value[i].id);
        this.commandList.devices.push(value[i].id);
        this.deviceImei.push(value[i].id);
      }
      this.deviceId = this.deviceId.substring(0,this.deviceId.length-1);
      if(value.length == 1){//当勾选一个设备的时候显示详情
        const deviceId = value[0].id;
        this.rightFalg = true;
        this.groupInfoFlag = true;
        this.groupDetailFlag = false;
        deviceInfo(deviceId).then(Response => {
          this.deviceInfo = Response.data.device;
          this.tiktok = Response.data.device.tiktok;
          this.otherDeviceNames = Response.data.otherDeviceNames;
        })
      }
      if(value.length > 1){// 当勾选多个设备的时候显示
        this.rightFalg = true;
        this.groupInfoFlag = false;
        this.groupDetailFlag = true;
      }
      if(value.length != 1 && value.length < 1){// 没有勾选的情况不显示操作面板
        this.rightFalg = false;
      }
    },
    // 添加设备分组信息
    addGroupInfo() {
      if (this.addGroupFlag) {
        addGroup(this.deviceName, 1).then(Response => {
          if (Response.code == 200) {
            groupDevice().then(Response => {
              this.deviceName = '';
              this.addGroupFlag = false;
              this.leftAside = Response.data;
              this.$message.success("操作成功");
            })
          } else {
            console.log(Response.message);
          }
        })
      }
    },
    // 删除设备分组信息
    deleteId(id) {
      this.deleteGroupFlag = true;
      this.deleGroupId = id;
    },
    deleteGroup() {
      deleteGroup(this.deleGroupId).then(Response => {
        if (Response.code == 200) {
          groupDevice().then(Response => {
            this.deleteGroupFlag = false;
            this.leftAside = Response.data;
            this.$message.success("操作成功");
          })
        } else {
          console.log(Response.message);
        }
      })
    },
    // 分页操作
    handleCurrentChange(value) {
      this.dataObj.offset = (value - 1) * this.dataObj.limit;
      searchDevice(this.dataObj.groupId, this.dataObj.limit, this.dataObj.offset).then(Response => {
        this.tableData = Response.data.records;
      })
    },
    addTask() {

    },
    // 设备重命名
    setName() {
      const renameList = [];
      for(var i = 0; i < this.setNameList.length;i++){
        renameList.push({id:this.setNameList[i].id,name:this.setNameList[i].name});
      }
      setName(renameList).then(Response =>{
        if(Response.code == 200){
          this.setNameFlag = false;
          this.$message.success("操作成功");
        }else{
          console.log(Response.message);
        }
      })
    },
    // 设置分组
    setGroup(){
      var data = {'devices':this.deviceId,'groupId':this.reGroupId};
      setGroup(data).then(Response => {
        if(Response.code == 200){
          this.setGroupFlag = false;
          this.$message.success("操作成功");
          this.reload();
        }else{
          console.log(Response.message);
        }
      })
    },
    // 设备互动操作
    addTaskInteraction (name,labname,nikname,id) {
      this.interaction = name;
      this.form.labName = labname;
      this.form.intname  = nikname;
      this.interactionFlag = true;
      this.form.forwardId = id;
      this.form.libraryId = id;
    },
    interactionTask () {
      this.interactionList.extraMessage = this.form.forward.replace('\n','#');//互动评论内容
      this.interactionList.maxCounts = this.form.number; //数量
      this.interactionList.name = this.form.intname; // 名字
      this.interactionList.url = this.form.url; // url
      if(this.form.libraryId == 1){
        this.interactionList.extraMessage = this.videoId;
        publishVideo(this.interactionList).then(Response =>{
          if(Response.code == 200){
            this.interactionFlag = false;
            this.$message.success("操作成功");
          }else{
            console.log(Response.message);
          }
        })
      }else{
        interaction(this.interactionList).then(Response =>{
          if(Response.code == 200){
            this.interactionFlag = false;
            this.$message.success("操作成功");
          }else{
            console.log(Response.message);
          }
        })
      }
    },
    //评论选择文件上传
    uploadfile () { 
      var formdata = new FormData();
      formdata.append('file', this.$refs.upload.files[0]);
      uploadComment(formdata).then(Response =>{
        if(Response.code == 200){
          this.$message.success("操作成功");
          this.form.forward = Response.data.join('\n');
        }
      })
    },
    // 设备简单指令操作
    addTaskCommand (name) {
      this.commandList.name = name;
      command(this.commandList).then(Response =>{
        if(Response.code == 200){
          this.$message.success("操作成功");
        }else{
          console.log(Response.message);
        }
      })
    },
    // 指定客服操作
    setUser () {
      setUser(this.deviceImei,this.dataObj.groupId,this.userId).then(Response =>{
        if(Response.code == 200){
          this.$message.success("操作成功");
          this.addTaskUserFlag = false;
        }else{
          console.log(Response.message);
        }
      })
    },
    tabUser(value){
      this.userId = '';
      for(var i = 0 ; i< value.length; i++){
        this.userId = value[i].id;
      }
    },
    // 作品库数组选择事件
    tabLibrary(value){
      this.videoId = '';
      if(value.length >= 1){
        var index = Math.round(Math.random() * (value.length - 1));
        this.videoId = value[index].id;
      }
    },

  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .leftTab{
    font-size: 14px;
    border-right: 1px solid #ddd;
    margin-right: 10px;
  }
  .leftTab .group , .el-aside .subGroup{
    padding: 10px 20px ;
    cursor: pointer;
  }
  .leftTab .groupButton{
    margin: 10px 25px;
  }
  .leftTab .subGroup{
    position: relative;
  }
  .deleteButton{
    position: absolute;
    right: 22px;
    background: none;
    top: 0;
    color: #333;
    border: 0;
    display: none;
  }
  .leftTab .subGroup:hover .deleteButton{
    display: block;
  }
  .el-cont{
    text-align:center;
  }
  // 分页样式
  .pagination{
    margin-top: 10px;
  }
  // 右边模块布局样式
  .groupdetail{
    padding-left: 20px;
  }
  .title{
    margin:10px;
  }
  .option{
    margin-top: 10px;
  }
  .option button{
    margin-top: 10px;
  }
  .reGroupList .el-radio{
    display: block;
    line-height: 36px;
    margin: 0;
  }
  #textheight{
    height:200px !important;
  }
  #uploadfile{
    position: absolute;
    left: 0;
    opacity: 0;
    width: 100%;
    height:100%;
  }
</style>
